{% extends 'admin/adminbase.html' %}
{% load static %}
{% csrf_token %}

{% block rightside %}
<div class="ui grid container">
    <div class="row">
        <a class="ui teal labeled icon button" href="add">
            <i class="add icon"></i> 新建文章
        </a>
        <div class="ui left action right icon input" id="searchInput">
            <div class="ui basic floating dropdown button">
                <div class="text">搜索条件</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item">标题</div>
                    <div class="item">文章内容</div>
                    <div class="item">标签</div>
                    <div class="item">类别</div>
                </div>
            </div>
            <input type="text" placeholder="搜索" v-model="searchText"/>
            <i class="circular search link icon" @click="search"></i>
        </div>
        {% if search %}
        <div class="ui teal left pointing basic label">
            搜索内容：{% if search_condition == "title" %}标题{% elif search_condition == "content" %}文章内容{% elif search_condition == "tag" %}标签{% elif search_condition == "category" %}类别{% endif %} / {{ search_text }}
        </div>
        {% endif %}
    </div>
    <div class="row">
        <table class="ui celled compact striped table" id="articlesTable">
            <thead>
                <tr>
                    <th>标题</th>
                    <th>发布时间</th>
                    <th>作者</th>
                    <th>类别</th>
                    <th>标签</th>
                    <th>是否公开</th>
                    <th>允许评论</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for article in articles %}
                <tr class="single line">
                    <td>{{ article.title }}</td>
                    <td>{{ article.add_time }}</td>
                    <td>{{ article.author }}</td>
                    <td>
                        {% for categroy in article.categories.all %}
                        <span class="ui label">{{ categroy.name }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        {% for tag in article.tags.all %}
                        <span class="ui label">{{ tag.name }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        <div class="ui small buttons">
                            <button class="ui {% if article.open_to_public %}teal{% endif %} button" @click="openToPublic({{ article.id }},1)">是</button>
                            <div class="or"></div>
                            <button class="ui {% if not article.open_to_public %}teal{% endif %} button" @click="openToPublic({{ article.id }},0)">否</button>
                        </div>
                    </td>
                    <td>
                        <div class="ui small buttons">
                            <button class="ui {% if article.allow_comment %}teal{% endif %} button" @click="allowComment({{ article.id }},1)">是</button>
                            <div class="or"></div>
                            <button class="ui {% if not article.allow_comment %}teal{% endif %} button" @click="allowComment({{ article.id }},0)">否</button>
                        </div>
                    </td>
                    <td>
                        <div class="ui small buttons">
                            <a class="ui teal button" href="/admin/article/modify?id={{ article.id }}">修改</a>
                            <button class="ui red button" v-on:click="deleteArticle({{ article.id }})">删除</button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="8">
                        <div class="ui right floated pagination menu">
                            {% if articles.has_previous %}
                            <a class="icon item" @click="previousPage({{ articles.previous_page_number }})"><i class="left chevron icon"></i></a>
                            {% endif %}
                            <span class="item">{{ articles.number }} / {{ articles.paginator.num_pages }}</span>
                            {% if articles.has_next %}
                            <a class="icon item" @click="nextPage({{ articles.next_page_number }})"><i class="right chevron icon"></i></a>
                            {% endif %}
                        </div>
                    </th>
                </tr> 
            </tfoot>
        </table>
    </div>
</div>
<div class="ui basic modal">
    <div class="ui header">
        <div class="ui text loader">后台操作 ing ...</div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'js/admin/article/index.js' %}"></script>
<script>
$(".ui.dropdown").dropdown({
    onChange:function(value,text,$selectedItem){
        if(value == "标题"){
            searchCondition = "title";
        }else if(value == "文章内容"){
            searchCondition = "content";
        }else if(value == "标签"){
            searchCondition = "tag";
        }else if(value == "类别"){
            searchCondition = "category";
        }
    }
});
</script>
{% endblock %}
